<template>
	<view>
		<view class="search_top" v-if="isTab">
			<van-search :use-action-slot='true' cancel-class='asd' :value="value" placeholder="请输入搜索关键词">
				<template slot="action">
					<van-button size='small' icon="search" type="danger"/>
				</template>
			</van-search>
		</view>
		<view v-if="isTab" style="background: #fff;">
			<van-tabs @click='onTabs'>
			  <van-tab :title="active_hong ? '已认领':'已报名'"></van-tab>
			  <van-tab title="已完成"></van-tab>
			</van-tabs>
		</view>
		
		<!-- 下方主题数据区域 -->
		<view class="dataView">
			<view v-if="isTab" style="margin: 0.3rem 0;font-size: 0.6rem;">共两条数据</view>
			<!-- 参加的活动 -->
			<view v-if="!active_hong" class="box" v-for="(item) in comarr" :key="item.id">
				<!-- 左侧img盒子 -->
				<view class="Img_box">
					<img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="">
				</view>
				<!-- 右侧盒子 -->
				<view class="box_right">
					<view style="margin-bottom: 0.5rem;">
						<view style="font-size: 0.75rem;">{{ item.title }}</view>
						<view style="font-size: 0.75rem;">哈哈哈哈哈</view>
					</view>
					<view style="color: #b4b4b4;">
						<view>
							<van-icon name="clock-o" style='margin-right: 0.3rem;' />
							<text>{{ item.starttime +'至'+item.endtime }}</text>
						</view>
						<view style="display: flex;justify-content: space-between;">
							<view>
								<van-icon name="location-o" style='margin-right: 0.3rem;' />
								<!-- <van-icon name="map-marked" style='margin-right: 0.3rem;' /> -->
								<text>{{ item.site }}</text>
							</view>
							<van-tag color='#ff645b' round>{{ item.status==1 ? '已完成':'已报名' }}</van-tag>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 认领的红哨 -->
			<view v-else class="box claim" v-for="(item) in comarr" :key="item.id">
				<view class="claim_left">
					{{ item.title }}
				</view>
				<view class="claim_right">
					<view>
						<view>
							<text class="grayColor">问题主题：</text>
							<text>{{ item.title }}</text>
						</view>
						<van-tag custom-class='tag' color='#ff645b' round>建议</van-tag>
					</view>
					<view>
						<text class="grayColor">问题内容：</text>
						<!-- 动态数据 -->
						<text>问题内容1111</text>
					</view>
					<view>
						<!-- <van-icon style='margin-right: 0.3rem;' name="map-marked" /> -->
						<van-icon name="location-o" style='margin-right: 0.3rem;' />
						<text class="grayColor">服务地址：</text>
						<!-- 动态数据 -->
						<text>{{ item.site }}</text>
					</view>
					<view>
						<view>
							<van-icon name="clock-o" style='margin-right: 0.3rem;' />
							<text class="grayColor">预约时间：</text>
							<text>{{ item.starttime +'至'+item.endtime }}</text>
						</view>
						<text v-if='item.status==0' style='color:#8be497;'>已认领</text>
						<text v-if='item.status==1' style='color:#ffc778;'>已完成</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"Search",
		props:{
			value:{ 
				default:'',
			},
			// 控制tab 文字显示  活动或者红哨  默认活动 用来控制上方数据区域的展示
			active_hong:{
				default:false,
			},
			isTab:{
				default:false,
			},
			// active_hong:{
			// 	default:false,
			// },
		},
		name:"search",
		data() {
			return {
				//控制的数据
				statusCount:0,
				arr:[
					{
						imgsrc:'',
						title:'三线街道南仙社区',
						starttime:'2022-08-01',
						endtime:'2022-08-13',
						site:'南县家园',
						id:'1123',
						status:0, // 0:已报名 1：已完成
						active_hong:0,
					},
					{
						imgsrc:'',
						title:'阿萨的一位演员哇塞的',
						starttime:'2022-08-01',
						endtime:'2022-08-13',
						site:'南县家园',
						id:'4334',
						status:0, // 0:已报名 1：已完成
						active_hong:0,
					},
					{
						imgsrc:'',
						title:'华盛顿哈哈是的',
						starttime:'2022-08-01',
						endtime:'2022-08-13',
						site:'南县家园',
						id:'9878',
						status:1, // 0:已报名 1：已完成
						active_hong:0,
					},{
						imgsrc:'',
						title:'华盛顿哈哈是的',
						starttime:'2022-08-01',
						endtime:'2022-08-13',
						site:'南县家园',
						id:'0986',
						status:1, // 0:已报名 1：已完成
						active_hong:0,
					},
					{
						imgsrc:'',
						title:'华盛顿哈哈是的',
						starttime:'2022-08-01',
						endtime:'2022-08-13',
						site:'南县家园',
						id:'6674',
						status:1, // 0:已报名 1：已完成
						active_hong:0,
					}
				],
			};
		},
		methods:{
			onTabs(value){
				this.statusCount = value.detail.index
			},
		},
		computed:{
			comarr(){
				return this.arr.filter(item=>item.status == this.statusCount)
			}
		},
	}
</script>

<style lang="less" scoped>
.search_top{
	background: #fff;	
}
.dataView{
	background: #f6f3f7;
	padding: 0.6rem;
	.box{
		font-size: 0.8rem;
		display: flex;
		padding: 2%;
		height: 6.2rem;
		background: #fff;
		box-sizing: border-box;
		margin-bottom: 0.5rem;
		border-radius: 6px;
		.Img_box{
			height: 100%;
			width: 30%;
			margin-right: 0.5rem;
			img{
				height: 100%;
				width: 100%;
			}
		}
		.box_right{
			font-size: 0.75rem;
			line-height: 1.2rem;
			width: 70%;
		}
	}
	.claim{
		padding: 0;
		border-radius: 6px;
		.claim_left{
			border-top-left-radius:6px ;
			border-bottom-left-radius:6px ;
			background: #ff6358;
			width: 17%;
			padding: 3%;
			box-sizing: border-box;
			color: #fff;
			font-size: 0.9rem;
			writing-mode: vertical-lr;
			letter-spacing: 0.2rem;
		}
		.claim_right{
			margin-left: 0.3rem;
			padding: 2%;
			width: 87%;
			// font-size: 0.74rem;
			font-size: 0.66rem;
			>view{
				width: 100%;
				line-height: 1.4rem;
			}
			view:nth-child(1),view:last-child{
				display: flex;
				justify-content: space-between;
			}
			.tag{
				width: 3rem;
			}
		}
		.grayColor{
			color: #b4b4b4;
			
		}
	}
}
</style>